<template>
	<view class="content">
		<view class="list">
			<view @click="select(item.sid)" class="item" :class="{'select':selectarr.indexOf(item.sid)!=-1}" v-for="(item,index) in lists" :key="index">
				{{item.subject_name}}
			</view>
		</view>
	<view @click="gotoyeralist" class="btn">下一步</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lists:[],
				selectindex:0,
				data:'',
				selectarr:[]
			}
		},
		onLoad(e) {
			this.data=JSON.parse(decodeURIComponent(e.data));
			this.$zapi.apiPost('user/subject.Lists/subjectLists',{student_id:this.data.children_id})
				.then(res => {
					var data = res.data;
					if(data.code==200){
						this.lists=data.data;
					}
					else{
						uni.showToast({
							title: data.msg,
							icon:'none'
						});
					}
				});
		},
		methods:{
			select:function(sid){
				if(this.selectarr.indexOf(sid)!=-1){
					this.selectarr.splice(this.selectarr.indexOf(sid),1)
				}else{
					if(this.selectarr.length>=this.data.subject_num){
						uni.showToast({
							title: "选择科目数上限",
							icon:'none'
						});
					}else{
						this.selectarr.push(sid);
					}
				}
			},
			gotoyeralist:function(){
				
			if(this.selectarr.length==0){
				uni.showToast({
					title: '请选择一个科目',
					icon:'none'
				});
			}else{
				this.data.subject=this.selectarr;
				uni.navigateTo({
					url:'yeralist?data='+encodeURIComponent(JSON.stringify(this.data))
				})
			}
			}
		}
		
	}
</script>

<style lang="scss">
	.content {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.list {
		width: 92%;
		margin: auto;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;

		.item {
			margin-top: 20upx;
			width: 214upx;
			height: 80upx;
			border-radius: 8upx;
			background: rgba(247, 247, 247, 1);
			text-align: center;
			line-height: 80upx;
			color: #666666;
			margin-right: 20upx;
		}
	}
	.item:nth-child(3n) {
		margin-right: 0upx !important;
	}
	.select{
		background:#FF9900 !important;
		color: #fff !important;
	}
	.btn{
		width: 92%;
		height: 80upx;
		border-radius:4px;
		background:#FF9900;
		text-align: center;
		line-height: 80upx;
		font-size: 34upx;
		color: #FFFFFF;
		position: fixed;
		left: 4%;
		bottom: 30upx;
		}
</style>
